<template>
    <el-card>
        <my-bread level1="商品管理" level2="商品列表"></my-bread>

        <el-alert
            class="alert"
            title="添加商品信息"
            type="success"
            center
            show-icon
        ></el-alert>

        <el-steps
            :active="1 * active"
            finish-status="success"
            simple
            style="margin-top: 20px"
        >
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品描述"></el-step>
        </el-steps>

        <el-form
            style="height: 400px; overflow: auto"
            label-position="top"
            label-width="80px"
            :model="form"
        >
            <el-tabs v-model="active" tab-position="left">
                <el-tab-pane name="1" label="基本信息">
                    <el-form-item label="商品分类">
                        <el-cascader
                            v-model="value"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="form.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <el-input v-model="form.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量">
                        <el-input v-model="form.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input v-model="form.goods_number"></el-input>
                    </el-form-item>
                </el-tab-pane>

                <el-tab-pane name="2" label="商品参数">
                    <el-form-item label="产地">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="国产"></el-checkbox>
                            <el-checkbox label="进口"></el-checkbox>
                            <el-checkbox label="出口转内销"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="合格标志">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="CCIB"></el-checkbox>
                            <el-checkbox label="CCEE"></el-checkbox>
                            <el-checkbox label="CECC"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="功率">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="大功率"></el-checkbox>
                            <el-checkbox label="中功率"></el-checkbox>
                            <el-checkbox label="小功率"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>

                <el-tab-pane name="3" label="商品图片">
                    <el-form-item label="上传图片">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane name="4" label="商品描述">
                    <el-form-item>
                        <quill-editor></quill-editor>
                        <el-button type="primary" class="btnAdd" @click="btnAdd"
                            >添加商品</el-button
                        >
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
    components: {
        quillEditor,
    },
    data() {
        return {
            active: "1",
            value: [],
            value: [],
            checkList: [],
            imageUrl: "",
            form: {
                goods_name: "",
                goods_price: "",
                goods_number: "",
                goods_weight: "",
            },
            options: [
                {
                    value: "dajiadian",
                    label: "大家电",
                    checkList: ["选中且禁用", "复选框 A"],
                    children: [
                        {
                            value: "bingxiang",
                            label: "冰箱",
                            children: [
                                {
                                    value: "songxia",
                                    label: "松下",
                                },
                                {
                                    value: "xiaomi",
                                    label: "小米",
                                },
                            ],
                        },
                        {
                            value: "binggui",
                            label: "冰柜",
                            children: [
                                {
                                    value: "haier",
                                    label: "海尔",
                                },

                                {
                                    value: "geli",
                                    label: "格力",
                                },
                            ],
                        },
                    ],
                },
                {
                    value: "diannao",
                    label: "电脑",
                    children: [
                        {
                            value: "huashou",
                            label: "华硕",
                            children: [
                                {
                                    value: "taishi",
                                    label: "台式机",
                                },
                                {
                                    value: "bjb",
                                    label: "笔记本",
                                },
                            ],
                        },
                        {
                            value: "lx",
                            label: "联想",
                            children: [
                                {
                                    value: "taishi",
                                    label: "台式机",
                                },
                                {
                                    value: "bjb",
                                    label: "笔记本",
                                },
                            ],
                        },
                        {
                            value: "pg",
                            label: "苹果",
                            children: [
                                {
                                    value: "taishi",
                                    label: "台式机",
                                },
                                {
                                    value: "bjb",
                                    label: "笔记本",
                                },
                            ],
                        },
                    ],
                },
                {
                    value: "shouji",
                    label: "手机",
                    children: [
                        {
                            value: "huawei",
                            label: "华为",
                        },
                        {
                            value: "xiaomi",
                            label: "小米",
                        },
                        {
                            value: "pingguo",
                            label: "苹果",
                        },
                    ],
                },
            ],
        };
    },
    methods: {
        btnAdd() {
            this.$router.push({ name: "goodslist" });
            this.$message.success("添加成功");
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>
<style>
.alert {
    margin-top: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.ql-editor {
    min-height: 200px;
}
.btnAdd {
    width: 200px;
    margin-left: 400px;
    margin-top: 20px;
}
</style>